Hace unas semanas en Pizcos Blogs vi un efecto de Background muy llamativo, está creado con JQuery y el autor es You Love Us.

Como bien señala Pizcos lo principal es entender la forma de añadir la imagen considerando que el tamaño (ancho) de la imagen debe ser igual a nuestro blog es decir debe tener la misma medida ancho) el largo no es tan importante aunque debemos considerar que debe tener más altura que nuestro header de lo contrario el efecto pierde su encanto.

Buscaremos una imagen que mida lo mismo de ancho, en las páginas de Wallpapers encontraremos un gran surtido que podemos adecuar de tamaño con algún editor de imágenes.

El siguiente paso que nos recomienda Pizcos sería añadir a la plantilla la librería JQuery y copiar el plugin en el bloc de notas que lo guardaremos como jquery.backgroundPosition.js o jquery.backgroundPosition.txt. para subirlo más tarde a un alojamiento y añadirlos en la plantilla justo antes de </body>

Ahora bien, yo he optado por mostrar la imagen únicamente en el header(cabecera) de nuestro blog, para ello la imagen debe medir de ancho lo mismo que nuestra cabecera "header-wrapper" y añadir todo el código en la plantilla para evitar así alojamientos externos.

¿Vemos cómo hacerlo?
He añadido justo antes de </head> lo siguiente:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
//]]>
</script>

<script type='text/javascript'>
$(function() {


var backgroundheight = 750;
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 60 / 24 * 100;
var percentofday = hourpercent + minutepercent;
var startoffset = backgroundheight / 100 * percentofday;
var endoffset = startoffset + backgroundheight;

function scrollbackground() {
$(&#39;body&#39;).css({
backgroundPosition: &#39;50% -&#39; + startoffset + &#39;px&#39;
});
$(&#39;body&#39;).animate({
backgroundPosition:&#39;(50% &#39; + endoffset + &#39;px)&#39;
},
100000,
&quot;linear&quot;,
function () {
scrollbackground();
}
);
}

scrollbackground();
}
);
</script>

Como veréis he marcado en color rojo el ancho de la imagen que mide 750px × 600px y es el mismo ancho de header-wrapper.

Nos queda añadir la imagen, buscamos los estilos de body y la añadimos de la siguiente forma:

background: #000 url(url-de-la-imagen) repeat-y;

  • El color negro ( #000) es el color que se muestra al cargar la página.
  • Con repeat-y estamos diciendo que la imagen se repita en vertical.
  • Si deseamos dar más altura a la cabecera para que la imagen quede más vistosa añadimos height: 220px; o una cantidad similar en header-wrapper.
Y eso es todo, el ejemplo haciendo click sobre la imagen.




Boudoir

Hola!
tu blog me parece interesantisimo y sobretodo de gran ayuda porq sabes explicar de manera muy asertiva todos los temas lo q hace q hata al mas simple mortal le sea fácil entender..
Ahora bien tengo mi duda, soy nueva en esto de los blogs y hay algo que me sucede al subir imagenes en el post, resulta q he visto blogs en los q utilizan imagenes grandes y se ven de muy buena calidad, no se pixelan para nada, pero yo cuando subo una imagen en una entrada y la agranado, pierde la calidad y entonces en el post la imagen se ve pixelada o borrosa y solo logro que se vea bien con una tamaño pequeño y eso que las imagenes que utilizo son de un tamaño bastante grande y de buena calidad..cómo puedo hacer para agrandar la imagen en mi post sin que pierda su calidad al hacerlo???
apreciaria montones que puedas responder mi pregunta, quizas ya o has hecho antes, si es asi me dejas el link de la respuesta, me intera mucho saber cmo hacerlo. De antemano gracias.
Saludos! :)

Responder
Henry

Con el permiso de Gema, CASSIAN: Si tienes una imagen demasiado grande en un espacio pequeño tambien se distorciona al igual que si tienes una imagen pequeña y la quieres agrandar, yo te recomiendo que utilices un programa para tratamiento de imagenes y dejar tus imagenes justo del tamaño que necesites.

Hay un pluggin que se agrega a windows es gratuito Microsoft PowerToys for Windows XP

suerte

Responder
jack sparrow

HOLA GEMA:
ENTIENDO TODO EL CODIGO, MENOS LA PARTE EN LA QUE HAY QUE PEGAR "background: #000 url(url-de-la-imagen) repeat-y;", PROBE EN VARIAS LINEAS DEL CODIGO PERO NO ME FUNCIONO.
SI PUEDES DECIRME TE LO AGRADECERIA.
EN ESTE MOMENTO ESTO MODIFICANDO LA PLANTILLA "ZINMAG REMEDY" DE BTEMPLATES, Y ME GUSTARIA APLICAR ESTE EFECTO A MI PLANTILLA.

SALUDOS.

Responder
Susy

Te he escrito otro comentario y no sale, además los "seguidores" de mi blog han desaparecido de la noche a la mañana, se pueden ver en I.E. pero no en Firefox.
He mirado en la red y parece que hay más gente con tal problema pero al revés, los ven en firefox pero no en I.E.
Sabes algo al respecto tú?

Un abrazo y espero lo estés pasando muy, muy bien.

Responder
Anónimo

Hola! Llevo tiempo siguiendo tus ideas, y me han ayudado mucho para montar mi blog. Quiero añadirle un formulario de contacto como el que tienen aqui, http://lmdquiquemail.blogspot.com/, y me da cosa preguntarle a los administradores de este blog porque no son un blog de ayuda. Alguna pista de como lo han hecho? :((

Responder
Susy

Otra vez yo,
que ya lo he solucionado, seguí buscando y requetebuscando en foros y en uno contestaban al problema de los "seguidores" desaparecidos y lo que había que hacer para volver a recuperarlos.
Por si sirve para otros lo dejo aquí:
En M.F.-> Herramientas->Opciones->Privacidad... y eliminar todas las cookies y todos los datos privados.

Gracias no obstante y disculpas por traer esto aquí sin venir a cuento.

Otro abrazo.

Responder
Gem@

yz Cassian la recomendación de Henry es buena, sin embargo podemos mostrar las imágenes en su tamaño real. Mira la siguiente url creo que te será de ayuda :)
http://gemablog-.blogspot.com/2008/11/muchos-lo-preguntan-y-todos-lo-queremos.html

yz No se pide permiso Henry, se agradece mucho cuando se intenta ayudar :)

yz Cualquier sitio es bueno Susy, me alegra que lo solucionaras y te agradezco que quieras compartirlo.
Gracias por avisar :D

yz jack sparrow esa parte de background: #000 url(url-de-la-imagen) repeat-y; es la imagende fondo que debemos añadir en los estilos de body.
En tu plantilla lo encontrarás así:
body {
background: #0E0F0F url(url-de-la-imagen) repeat-y;
margin:0 auto;
padding:0px 0 0px 0;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
}

(Debes añadir lo que está en negrita con la url de tu imagen y eliminar la línea de background:#0E0F0F;)

yz Anónimo es muy largo de explicar en un comentario la forma de añadir un formulario de esa clase, pero puedes mirar en el blog de J.Miur porque él lo explicó hace tiempo y en Zona Cerebral también lo explicó Iván ;)
http://vagabundia.blogspot.com/
http://zonacerebral.com/

Responder
Gem@

yz jack sparrow la línea que debes eliminar de background:#0E0F0F es la que tienes ahora mismo en tu plantilla, te puse el código con ella suprimida ya.

Responder
jack sparrow

MUCHISIMAS GRACIAS GEMA, VOY A PROBAR QUE TAL FUNCIONA.
SALUDOS

Responder
Gabuleta*

Hola de nuevo Gema! Perdón que siga molestando :) pero me faltan tres cositas en el blog y lo tengo listo! (Bueno, faltaría subir contenido jaja).
No encuentro ninguna entrada donde sea adecuado consultarte esto asique lo hago acá, si está fuera de lugar decime por favor.
Primer consulta: mi main wrapper tiene un ancho de 650, lo quiero de 550 pero de ponerlo así, en mozilla se baja la sidebar!
Segundo: como hago para justificar todas las entradas? No encuentro como!
Tercero: el menú que hay en mi header, se ve solo si: en IE dejo habilitado siempre la vista de compatibilidad (cosa que no se si todos hacen) y en firefox no se ve!
Si tenés tiempo de ayudarme buenisimo.
Muchas gracias!
Gaby.

Responder
Gem@

yz jack sparrow, cualqier cosa házmelo saber :)

yz Gabuleta* de qué blog hablamos? en el perfil veo varios :O

Responder
Vku

hola gema
este efecto queda muy bueno
el problema que he tenido es que al subir una imagen tanto jpg como png al blog utilizando el metodo de entradas guardadas como borrador estas no se muestran al ingresarlas en body
tenes idea de que puede pasar?, si lo subo a otro servidor como xoo image si se ve
tambien se ve la imagen en la entrada o con el link directamente pero al imprementarlo y guardar ya no se ve.
otra cosa es que al utilizar la libreria de prototype hay que cambiar el código si tú quieres te lo paso ya modificado
de esa manera los que utilicen prototype pueden utilizarlo sin crear confrictos con jquery
me avisas.

Responder
Gabuleta*

Hola Gema! El blog es "probando" (blupruebas.blogspot.com). Que dstraída que soy jaja, perdon!

Responder
Anónimo

Hola Gema, soy un gran seguidor de tu blog. He aprendido mucho.

Podrias ayudarme? verás, tengo un blog donde recibo centenares de comentarios, la gran parte de ellos son de anónimos. Me gustaría cambiar el formato de los comentarios y ponerlo como salen las webs mas profesionales o blogs como wordpress tipo:

nick- (requerido)
msn- (requerido)
url- (opcional)

o algo así. Gracias

Responder
HaCk CrAcK

Hola Gema, no concoes alguna forma de agregar borde a imagenes en el post, pero que en las imagenes png no tengan borde, es decir poner en la plantilla:
.post img {border:4px solid #E6E6E6} pero que esto excluya a los png.

Espero que me halla podido hacer entender

Responder
Dj Schuma

Gema , me presento, soy Dj Schuma, y gracias a todos tus consejos mi sitio ha quedado como lo imaginaba!!!

http://djschuma.blogspot.com

SuPer!

Responder
Dj Schuma

Tambien he adquirido algunos trucos con muchissima paciencia, tanta, que ni me acordaria de todos los pasos, en pruebas y demas!
Si te interesa saber algo de lo q tengo y te ayuda con gusto respondere.
Un Super mega abrazo!
Checate mi sitio y me das tu punto de vista.
http://djschuma.blogspot.com

Responder
JLAH

GEMA, esperando no te enojes mucho, tomé prestada tu imagen "TOP" y el código para colocarlo en tres de mis blogs.

Saludos desde Montreal, Canadá.

José Luis Ávila Herrera
www.fotofrontera.com

Responder
Gem@

yz Vku no he podido ver como queda en tu blog para ver ese problema con la imagen, sefuramente se trata de un error al copiar la url y añadirla en body, me gustaria ver la imagen para probar y subirla en una entrada de Blogger.
Por otra parte me parece genial que desees compartir ese código, esperand estamos :)

yz Voy a verlo Gabuleta* ;)

yz Anónimo para eso es necesario añadir un formulario y no tengo nada escrito sobre ello, sin embargo Iván de http://zonacerebral.com/ explicó como añadir un formulario en Blogger.

yz Con CSS no HaCk CrAcK pero puedes.
hacerlo con HML, puedes incluir el código en la plantilla de entrada para no tener que copiarlo cada vez y aparecerá en todas las entradas que vas a editar, si no lo requieres si elimina y listo.
Creamos un estilo de borde en CSS algo así:


#imagenborde a img {
background-color: #fff;
border: 2px solid #111;
margin: 3px 3px 0 3px;
}

y luego cada vez que deseas añadir ese borde en HTML (en las entradas) añades:

<div id="imagenborde"><div style="text-align: center;">
<img src="url-imagen" /></div></div>
Suerte :)

yz Saludos Dj Schuma encantada con tu comentario y sugerencia, nada más tenga oportunidad te hago una visita ahora tengo el tiempo contado para responder a los comentarios. Pero repito ... encantada con tu ofrecimiento y deseando ver esos trucos :)

yz No me enojo nada José Luis, puedes llevarte lo que desees.
Esa imagen también la tomé prestada de otro blog :)

Responder
Vku

Gema fijate el blog de pruebas ahi tengo el codigo
abajo del todo antes de /head
y la imagen es en mi blog principal si te fijas en el código de body la subi a xoo image pero queria utilizar esta http://4.bp.blogspot.com/_WvACVGW1iPE/SnW88xetCJI/AAAAAAAAAPw/cQoDxyuIUcY/s1600-h/fnd.jpg
el blog de pruebas es este
http://loseasi-pruebas.blogspot.com
desde ya gracias

Responder
Vku

perdon antes de /body
view-source:http://loseasi-pruebas.blogspot.com/
le agrege un var (var kk = jQuery.noConflict();) y le cambie $ por kk

Responder
El Susurrador

fantástico Gema. Sin duda será parte de mi proyecto.

Responder
Anónimo

genial, pero en realidad vine porque a mi blog le pasa algo, esta enfermo, yo no he tocado nada y mi footer se fue, mira, entra, mirale el codigo fuente de mi pagina y veras que pasa algo malo, me ayudas?
sur-juegos.blogspot.com

Responder
HaCk CrAcK

Pero lo que pasa es que ya tengo un monton de entradas con imagenes png, y me tardaria mucho en modificar entrada por entrada por eso decia para hacer algo que lo haga automatico

Responder
Vku

con tú permiso te agrege a mi sidebar como blog de ayuda, ya que me da pracer tu interes por las demas personas al igual que a mi.
si no quieres me avisas y lo saco

Responder
Dj Schuma

Gema, visita mi sitio http://djschuma.blogspot.com
y dame tu punto de vista. he sacado de tus consejos casi la mayoria de los trucos. Gracias

Responder
Gem@

yz Vku la url que añades es la de Picasa, si te fijas en la barra del navegador sale el favicon, puedes subir la imagen a Blogger y una vez subida en el editor y sobre la pestaña de html verás que el código de la imagen proporciona dos tamaños uno dirá de 1.600 y el otro el tamaño que tu escoges.
La url que debes copiar es la última (el tamaño que tu determinas para la imagen) termina en algo así /s320/fnd.jpg debes suprimir el"32" o el "40" si escogiste el tamaño grande y dejar sólo la última cifra que siempre es 0 (cero).
Eso será la url de la imagen que has subido ;)
Sería algo así:
http://1.bp.blogspot.com/_q4j3j-JA2ro/Sn8JRQnO3bI/AAAAAAAALbA/pkAxvoAveMQ/s0/fnd.jpg
Agradezco el enlace Vku :D

yz Me alegra que sea de tu agrado El Susurrador :)

yz Ascesino96 los estilos del footer no pueden desaparecer solos, seguramente hiciste algún cambio y los eliminaste sin darte cuenta.
Deberías tener esto:
/* Footer
----------------------------------------------- */
#footer {
width:1007px;
clear:both;
margin:0 auto;
padding-top:0px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-image:url();
}
#footer-columna-contenedor {
margin-top:0px;
margin-left:0px;
clear:both;
background-color: #646464;
}
.footer-columna {
padding: 10px;
}
#col1{
background:#FFCC00;
margin: 5px;
padding: 5px;
border: 1px dotted #646464;
}
#col1 h2{
background:#646464;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#FFCC00;
}
#col2{
background:#FFCC00;
margin: 5px;
padding: 5px;
border: 1px dotted #646464;
}
#col2 h2{
background:#646464;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#FFCC00;
}
#col3{
background:#FFCC00;
margin: 5px;
padding: 5px;
border: 1px dotted #646464;
}
#col3 h2{
background:#646464;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#FFCC00;
}

(Pero te falta casi todo) :O

yz No HaCk CrAcK automático no hay nada :(

yz Dj Schuma he tardado en verla pero ha valido la pena. Me parece muy buen trabajo, todo muy bien organizado y ordenado. Me extrañó mucho el color de fondo porque todas las páginas que he visto de esta temática escogen colores oscuros y está bien el blanco, aporta claridad y comodidad para la lectura.
Muy bueno el efecto de la ventana modal en las imágenes y el de esquina doblada :)

Responder
Gem@

yz siento tardar en contestar Gabuleta :(
Es muy extraño lo que te pasa porque normalmente si disminuimos la medida de main por lógica lo ue ocurre es que queda más espacio entre las entradas y la sidebar. Lo que te ocurre es cuando aumentamos el main, mira una imagen que tienes que se llama pixelvacio.png está en ese espacio y comprueba si suprimiéndola te deja solucionar ese problema.

Responder
Vku

gema gracias por tu comentario e interes.

si las imagenes son subidas en blogger o sea a picasa y he modificado a todos los tamaños e incluso la original oo, tambien como png, gif y jpg he probado otras imagenes y las coloca perfectamente, es esa la imagen que no se deja añadir he visto en otras páginas que les ha pasado igual se ve que es problema de blogger con algunas imagenes nose a parte en una entrada se ve bien y tambien probe en el blog de pruebas y tampoco me la muestra (esta engualichada esa imagen)pasa solo en picasa tal ves sea por el tamaño o los bytes igual no es algo que me quite el sueño utilizo xoo imagen y listo.

otra cosa por si te interesa tengo un código nuevo de unas flechas de arriba y abajo que mueve despacio fijate en mi blog a la derecha si lo queres te lo paso

y no me contestaste lo del link si te molesta que lo ponga en mi página?

Responder
Gem@

yz Vku yo subí esa imagen (la que te dejé la url) y no he visto problema alguno incluso la añadí a ese blog del ejemplo y todo perfecto :O
Por enlazarme mujer ¿cómo me va a molestar? todo lo contrario ya te dije que lo agradezco :D

Responder
Vku

yz ahora si funciono.
la imagen subida por mi demora en cargar mas que la tuya pero funciona
es raro ya que es la misma
bueno gracias gema :D
a las ordenes por lo que necesites.

Responder
Gem@

yz No tienes que dármelas Vku me alegra que al fin lo solucionaras :D
-La demora debe ser por tu conexión, he mirado y carga rápido :D

Responder
Gabuleta*

Ohh se me borró el comantario jaja. Hola Gema!
Gracias por lo del píxel vacío, lo saqué y probé con diferentes anchos hasta que me funcionó bien!
Aprovecho para preguntarte si sabés como hacer para que a los usuarios de ciertos navegadores les aparezca un mensaje diciendo que el blog no se visualiza bien en ellos. No me parece muy lógico ponerlo ya que les aparecería a quienes usan Mozilla que es uno de los mejores a mi parecer, pero no hay forma de solucionar lo del menú que no se ve y no se que hacer, me gusta mucho como queda!! :(
Si sabés como hacer o como puedo buscarlo me vendría bárbaro!
Muchas gracias por todo.
Besos.
Gaby,.

Responder
Dj Schuma

Gema gracias por visitar mi sitio para darle el visto bueno, me alegra q te haya agradado el aspecto de este, seguire fielmente tus consejos. todo te lo debo a ti.

Responder
Gem@

yz Me alegra que se solucionara Gabuleta, por otra parte puede que haya algún script para informar sobre el navegador que se recomienda usar pero no sabría decirte de que scripts se trata :(

yz No tienes que dármelas Dj Schuma ha sido un placer conocer tu espacio :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top